<template>
  <div class="settle-panel">
    <div class="left">
      <fuel-bar></fuel-bar>
      <gun-panel></gun-panel>
    </div>
    <div class="right">
      <record-panel></record-panel>
    </div>
    <!-- 预付款弹窗 -->
    <!-- 结算列表选择弹窗 -->
    <to-settle-list-dialog></to-settle-list-dialog>
    <!-- 购物车弹窗 -->
    <cart-payment-dialog></cart-payment-dialog>
    <!-- 设置页面弹窗 -->
    <setting-page></setting-page>
    <!-- 预付款弹窗 -->
    <pre-pay-dialog></pre-pay-dialog>
    <!-- 交班销售报表 -->
    <shift-report-dialog></shift-report-dialog>
    <!-- 会员激活弹窗 -->
    <activation-dialog></activation-dialog>
    <!-- 商品领取 -->
    <receive-dialog></receive-dialog>
  </div>
</template>
<script>
import GunPanel from '../layout/GunPanel'
import FuelBar from '../layout/FuelBar'
import RecordPanel from './components/RecordPanel'
import ToSettleListDialog from './components/ToSettleListDialog'
import CartPaymentDialog from './CartPaymentDialog'
import SettingPage from '../layout/SettingPage'
import PrePayDialog from './components/PrePayDialog.vue'
import ShiftReportDialog from './components/ShiftReportDialog.vue'
import ActivationDialog from './components/ActivationDialog.vue'
import ReceiveDialog from '../../views/store/components/ReceiveDialog.vue'

export default {
  name: 'SettleIndex',
  components: {
    GunPanel,
    FuelBar,
    RecordPanel,
    ToSettleListDialog,
    CartPaymentDialog,
    SettingPage,
    PrePayDialog,
    ShiftReportDialog,
    ActivationDialog,
    ReceiveDialog
  }
}
</script>
<style scoped>
.settle-panel {
  /* width: 100%;
  height: 100%; */
  margin: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  background: whitesmoke;
}

.right {
  width: 520px;
  height: 100%;
  float: left;
  margin-left: 15px;
}

.left {
  width: calc(100% - 535px);
  height: 100%;
  float: left;
}
</style>